import React, { useState, useEffect, useRef } from 'react';
import { Select } from 'antd';
import { createDictionary } from '@/dictionary';
import { OrganizationSelector } from '@/components';

const { Option } = Select;

const [orgScopeList] = createDictionary('PRIVILEGE_TEMPLATE_ORG_SCOPE'); // 部门枚举
const [companyScopeList] = createDictionary('PRIVILEGE_TEMPLATE_COMPANY_SCOPE'); // 公司枚举

/**
 * @param {Boolean} isFunctional 默认情况下为行政机构(公司)，为true变更为职能机构/组织机构(部门)，默认false
 * @description 权限模板管理-权限下拉
 */
const PermissionSelect = React.forwardRef(
    ({ value, onChange, isFunctional = false, className, style, maxTagCount = 4, disabled = false, ...rest }, ref) => {
        const [privateValue, setPrivateValue] = useState();
        const [selectOptionList, setSelectOptionList] = useState([]);
        const companySelectorRef = useRef();
        const departmentSelectorRef = useRef();
        useEffect(() => {
            if (value) {
                setPrivateValue(value);
            }
        }, [value]);

        useEffect(() => {
            if (isFunctional === true) {
                setSelectOptionList(orgScopeList);
            } else {
                setSelectOptionList(companyScopeList);
            }
        }, [isFunctional]);

        const handleTypeChange = e => {
            setPrivateValue({ scopeField: e, scopeValues: [] });
            if (onChange) {
                onChange({ scopeField: e, scopeValues: [] });
            }
            setTimeout(() => {
                if (e === 4 && isFunctional === false) {
                    companySelectorRef.current.open();
                }
                if (e === 5 && isFunctional === true) {
                    departmentSelectorRef.current.open();
                }
            });
        };

        const handleScopeValueChange = _value => {
            setPrivateValue({ ...privateValue, scopeValues: _value });
            if (onChange) {
                onChange({ ...privateValue, scopeValues: _value });
            }
        };

        const typeValue = Number.isInteger(privateValue?.scopeField) ? privateValue?.scopeField : undefined;
        const scopeValues = privateValue?.scopeValues;
        return (
            <div className={className} style={{ minWidth: 200, ...style }} {...rest} ref={ref}>
                <Select
                    className={typeValue && 'validate-pass'}
                    value={typeValue} // 为空传给后端的时候，后端会返回空对象！！！后面后端可能会去修改
                    onChange={handleTypeChange}
                    placeholder="请选择"
                    style={{ width: '100%' }}
                    disabled={disabled}
                    allowClear
                >
                    {selectOptionList?.map(item => (
                        <Option key={item.value} value={item.value}>
                            {item.text}
                        </Option>
                    ))}
                </Select>
                {privateValue?.scopeField === 4 && isFunctional === false && (
                    <OrganizationSelector
                        className={scopeValues?.length ? 'validate-pass' : null}
                        ref={companySelectorRef}
                        disabled={disabled}
                        multiple
                        modal
                        isPreviewByGroup
                        style={{ width: '100%', marginTop: 5 }}
                        placeholder="请选择公司"
                        maxTagCount={maxTagCount}
                        value={scopeValues}
                        onChange={handleScopeValueChange}
                    />
                )}
                {privateValue?.scopeField === 5 && isFunctional === true && (
                    <OrganizationSelector
                        className={scopeValues?.length ? 'validate-pass' : null}
                        ref={departmentSelectorRef}
                        disabled={disabled}
                        multiple
                        modal
                        isPreviewByGroup
                        style={{ width: '100%', marginTop: 5 }}
                        isFunctional
                        placeholder="请选择部门"
                        maxTagCount={maxTagCount}
                        value={scopeValues}
                        onChange={handleScopeValueChange}
                    />
                )}
            </div>
        );
    }
);

export default PermissionSelect;
